<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div class="row" ng-controller="CubesCtrl"  style="margin-top:15px;">

<div ng-if="!loading && cubeList.cubes.length == 0">
    <div no-result text="No Cube."></div>
</div>
<loading ng-if="loading" text="Loading Cubes..."></loading>

<!--Table-->
<div ng-if="cubeList.cubes.length > 0" class="dataTables_wrapper no-footer">
    <div class="row">
        <div class="col-xs-7"><label class="table-header-text">Cubes</label></div>
      <!--button-->

    </div>
    <table class="table table-striped table-bordered table-hover dataTable no-footer">
        <!--Header-->
        <thead>
        <tr style="cursor: pointer">
            <th ng-repeat="theaditem in cubeConfig.theaditems"
                ng-click="state.filterAttr= theaditem.attr;state.reverseColumn=theaditem.attr;state.filterReverse=!state.filterReverse;">
                {{theaditem.name}}
                <i ng-if="state.reverseColumn!= theaditem.attr"
                   class="fa fa-unsorted"></i>
                <i ng-if="state.reverseColumn== theaditem.attr && !state.filterReverse"
                   class="fa fa-sort-asc"></i>
                <i ng-if="state.reverseColumn== theaditem.attr && state.filterReverse"
                   class="fa fa-sort-desc"></i>
            </th>
            <th>Actions</th>
            <th ng-if="userService.hasRole('ROLE_ADMIN')">Admins</th>
            <th>Streaming</th>
        </tr>
        </thead>
        <!--Body-->
        <tbody ng-repeat="cube in cubeList.cubes track by $index| orderObjectBy:state.filterAttr:state.filterReverse">
        <tr ng-class="{accordion:true}" style="cursor: pointer"  ng-click="cube.showDetail=!cube.showDetail;loadDetail(cube)">
            <td>
                <i ng-show="!cube.showDetail" class="fa fa-chevron-circle-right blue"></i>
                <i ng-show="cube.showDetail" class="fa fa-chevron-circle-down blue"></i>
                {{ cube.name}}
            </td>
            <td>
                <span class="label"
                      ng-class="{'label-success': cube.status=='READY', 'label-default': cube.status=='DISABLED'}">
                    {{ cube.status}}
                </span>
            </td>
            <td><span tooltip-html-unsafe="<div style='text-align:left'>
                Source Table Size: {{dataSize(cube.input_records_size)}}<br/>
                Expansion Rate: {{(cube.input_records_size>0? cube.size_kb*1024/cube.input_records_size : 0) * 100 | number:2}}%
                </div>">{{dataSize(cube.size_kb*1024)}}</span></td>
            <td><span tooltip-html-unsafe="<div style='text-align:left'>
                Source Table Size: {{dataSize(cube.input_records_size)}}<br/>
                Expansion Rate: {{(cube.input_records_size>0? cube.size_kb*1024/cube.input_records_size : 0) * 100 | number:2}}%
                </div>">{{ cube.input_records_count | number:0}}</span></td>
            <td>{{ (cube.last_build_time | utcToConfigTimeZone) }}</td>
            <td>{{ cube.owner}}</td>
            <td>{{ cube.create_time_utc | utcToConfigTimeZone}}</td>
            <td>
                <div ng-click="$event.stopPropagation();" class="btn-group" ng-if="userService.hasRole('ROLE_ADMIN') || hasPermission(cube, permissions.ADMINISTRATION.mask, permissions.MANAGEMENT.mask, permissions.OPERATION.mask)">
                    <button type="button" class="btn btn-default btn-xs dropdown-toggle"
                            data-toggle="dropdown" ng-click="listAccess(cube, 'CubeInstance')">
                        Action <span class="ace-icon fa fa-caret-down icon-on-right"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-if="cube.status=='DISABLED' && userService.hasRole('ROLE_ADMIN') ">
                            <a ng-click="dropCube(cube, $index)" tooltip="Drop the cube, related jobs and data permanently.">Drop</a></li>
                        <li ng-if="cube.status=='DISABLED' && (userService.hasRole('ROLE_ADMIN') || hasPermission(cube, permissions.ADMINISTRATION.mask, permissions.MANAGEMENT.mask))">
                            <a ng-click="cubeEdit(cube);">Edit</a></li>
                      <li ng-if="cube.streaming && cube.status=='DISABLED' && (userService.hasRole('ROLE_ADMIN') || hasPermission(cube, permissions.ADMINISTRATION.mask, permissions.MANAGEMENT.mask))">
                        <li><a ng-click="startJobSubmit(cube, $index);">Build</a></li>
                        <li><a ng-click="startRefresh(cube, $index)">Refresh</a></li>
                        <li><a ng-click="startMerge(cube, $index)">Merge</a></li>
                        <li ng-if="cube.status!='DISABLED'"><a ng-click="disable(cube, $index)">Disable</a></li>
                        <li ng-if="cube.status=='DISABLED'"><a ng-click="enable(cube, $index)">Enable</a></li>
                        <li ng-if="cube.status=='DISABLED'"><a ng-click="purge(cube, $index)">Purge</a></li>
                        <li><a ng-click="cloneCube(cube)">Clone</a></li>

                    </ul>
                </div>
                <span ng-if="!(userService.hasRole('ROLE_ADMIN') || hasPermission(cube, permissions.ADMINISTRATION.mask, permissions.MANAGEMENT.mask, permissions.OPERATION.mask))">
                    N/A
                </span>
            </td>
            <td ng-if="userService.hasRole('ROLE_ADMIN')">
                <div ng-click="$event.stopPropagation();" class="btn-group">
                    <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" ng-click="listAccess(cube, 'CubeInstance')">
                        Action <span class="ace-icon fa fa-caret-down icon-on-right"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-if="cube.status=='DISABLED'"><a href="cubes/edit/{{cube.name}}/json">Edit(JSON)</a></li>
                    </ul>
                </div>
            </td>
            <td>
              <label class="badge" ng-class="{'label-info':cube.streaming==true}" style="cursor:pointer;">{{cube.streaming}}</label>
            </td>
        </tr>
        <tr ng-show="cube.showDetail">
            <td colspan="10" style="padding: 10px 30px 10px 30px;">
                <div ng-include src="'partials/cubes/cube_detail.html'"></div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div class="row">
    <div class="col-xs-12">
        <kylin-pagination data="cubeList.cubes" load-func="list" action="action"/>
    </div>
</div>
<div ng-if="cubeList.cubes.length" class="pull-left font-color-default" style="font-size: 15px" >
    <strong>Storage: {{getTotalSize(cubeList.cubes)}}</strong>
</div>

<div ng-include="'partials/jobs/job_submit.html'"></div>
<div ng-include="'partials/cubes/streaming_build_tip.html'"></div>
<div ng-include="'partials/jobs/job_refresh.html'"></div>
<div ng-include="'partials/jobs/job_merge.html'"></div>
<div ng-include="'partials/projects/project_create.html'"></div>
<div ng-include="'partials/models/model_detail.html'"></div>
<div ng-include="'partials/cubes/cube_clone.html'"></div>

</div>
